<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>二手用户</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href="../css/sm.min.css">
		<link rel="stylesheet" href="../css/sm-extend.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<style type="text/css">
			#index {
				margin-top: 0.4rem;
			}
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
			/* 卡片内容加边距 */
			.my-cont{
				padding:.2rem .99rem;
				text-align:center
				
			}
			/* 背景色白色 */
			.page, .page-group{
				background-color: white;
			}
			/* 去掉卡片边距 */
			.card{
				/* margin: 0; */
			}
			/* 用户字体 */
			.list-block .my-user{
				font-size :0.6rem;
				color:rgb(150,150,150);
			}
			/* 头像圆角 */
			.my-photo img{
				border-radius: 1rem;
			}
			/*商品*/
			.commodity-title{
				font-weight: bold;
				font-size: medium;
			}
			.commodity-price{
				font-weight: bold;
				color: red;
				padding-right: 5rem;
			}
			/* 用户 */
			.user-name{
				font-size :0.6rem;
				color:gray;
			}
			.name{
				padding-left: 4rem;
				font-weight: bold;
			}
			.nickname{
				padding-left: 4rem;
				font-size :small;
			}
			.info{
				color: #000000;
				padding-left: 5rem;
				font-size :medium;
			}
			.mypage{
				font-size :x-small;
			}
			.litletitle{
				font-size :large;
				font-weight: bold;
				padding: 0.5rem;
				color:#67747D;
			}
			/* 跳转连接颜色 */
			a{
				color: inherit;
			}
			a:active{
				color: inherit;
			}
			
			
			/* 卡片主内容左右边距 */
			.my-data{
				padding-right: 7rem;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page" id="app">
			<!-- 工具栏 -->
			<nav class="bar bar-tab" style="background-color: yellow;">
				<a class="tab-item external" href="market-index.html">
					<span class="icon iconfont icon-chengshi"></span>
					<span class="tab-label">首页</span>
				</a>
				<a class="tab-item external" href="market-postgoods.html">
					<span class="icon iconfont icon-chuangzuo"></span>
					<span class="tab-label">发布商品</span>
				</a>
				<a class="tab-item external" href="market-message.html">
					<span class="icon iconfont icon-message"></span>
					<span class="tab-label">消息</span>
				</a>
				<a class="tab-item external active" href="#">
					<span class="icon iconfont icon-peoplelist"></span>
					<span class="tab-label">我的</span>
				</a>
			</nav>

			<!-- 页面内容 -->
			<div class="content">
				<div class=" facebook-card" style="background-color: yellow;">
				    <div class="card-header no-border" v-if="loginUser">
						<div class="facebook-avatar" >
						  <img :src="imgSrc(loginUser.photo)" width="70" height="70">
						</div>
				      <div class="name">{{loginUser.name}}</div>
				      <div class="nickname">昵称：{{loginUser.nickname}}</div>
					  <a @click="goMypage">
						  <div class="nickname">
							  <button class="button mypage"
							  style="background-color: white;color: black;border-color:yellow;" >
								个人主页>
							  </button>
						  </div>
					  </a>
				    </div>
					<div >
						<a href="#" @click="goMyAttention" class="info">关注</a>
						<a href="#" @click="goMyFans" class="info">粉丝</a>
					</div>
				</div>
				<!-- 主内容 -->
				<div class="list-block">
					<div class="card list-container" style="text-align:center">
						<div class="litletitle">
							<span >卖在悦生活</span>
						</div>
						<nav class=" bar-tab">
							<a class="tab-item external" href="#" @click="goIRelease">
								<span class="icon iconfont icon-chuangzuo"></span>
								<span class="tab-label">我发布的</span>
							</a>
							<a class="tab-item external" href="#" @click="goISell">
								<span class="icon iconfont icon-dollar"></span>
								<span class="tab-label">我卖出的</span>
							</a>
						</nav>
					</div>
					<div class="card list-container" style="text-align:center;margin-top:40px">
						<div class="litletitle">
							<span >买在悦生活</span>
						</div>
						<nav class=" bar-tab">
							<a class="tab-item external" href="#" @click="goIBuy">
								<span class="icon iconfont icon-cart"></span>
								<span class="tab-label">我买到的</span>
							</a>
							<a class="tab-item external" href="#" @click="goICollect">
								<span class="icon iconfont icon-goumaipianhao"></span>
								<span class="tab-label">我收藏的</span>
							</a>
						</nav>
					</div>
				</div>
			</div>
		</div>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<script src="../js/config.js"></script>
		
		<script>
			//VUE
			var app = new Vue({
				el:"#app",
				data:{
					loginUser:null
				},
				created() {
					//初始化加载登录用户信息
					this.initloginuser();
				},
				// 方法
				methods:{
					initloginuser: function() {
						axios.get(serviceIP+"/market/initloginuser",{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.loginUser = result.data.data;
						});
					},

					//图片映射
					imgSrc: function(src) {
						return src;
					},
					//我的个人主页跳转
					goMypage:function(){
						window.location="market-mypage.html?loginuserid="+this.loginUser.id
					},
					//关注页面跳转
					goMyAttention:function(){
						window.location="market-myattention.html?loginuserid="+this.loginUser.id
					},
					//粉丝页面跳转
					goMyFans:function(){
						window.location="market-myfans.html?loginuserid="+this.loginUser.id
					},
					//发布商品页面跳转
					goIRelease:function(){
						window.location="market-irelease.html?loginuserid="+this.loginUser.id
					},
					//卖出商品页面跳转
					goISell:function(){
						window.location="market-isell.html?loginuserid="+this.loginUser.id
					},
					//买到商品页面跳转
					goIBuy:function(){
						window.location="market-ibuy.html?loginuserid="+this.loginUser.id
					},
					//收藏商品页面跳转
					goICollect:function(){
						window.location="market-icollect.html?loginuserid="+this.loginUser.id
					},
					
				},
				
			});
		</script>

		<script>
			$.init();
		</script>
	</body>

</html>
